<template>
    <div class="el-input__inner_box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/index/home' }"
                >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item
                ><a href="/index/slideshow">轮播图管理</a></el-breadcrumb-item
            >
        </el-breadcrumb>
        <el-divider></el-divider>
        <el-input
            class="el-input__inner"
            v-model="input"
            placeholder="请输入内容"
        ></el-input>
        <el-button type="primary">搜索</el-button>
        <el-button
            icon="el-icon-circle-plus-outline"
            type="primary"
            @click="addSwiper"
            >添加
        </el-button>
        <el-table :data="swiperData" style="width: 100%">
            <el-table-column class="table_head" label="编号" prop="_id">
            </el-table-column>
            <el-table-column class="table_head" label="商品id" prop="goods_id">
            </el-table-column>
            <el-table-column
                class="table_head"
                align="center"
                prop="image_src"
                label="图片"
            >
                <template slot-scope="scope">
                    <div class="block">
                        <el-image
                            style="width: 100px; height: 100px"
                            :src="scope.row.image_src"
                            fit="scale-down"
                        ></el-image>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                class="table_head"
                label="导航地址"
                prop="navigator_url"
            >
            </el-table-column>
            <el-table-column
                class="table_head"
                label="打开方式"
                prop="open_type"
            >
            </el-table-column>
            <el-table-column class="table_head" label="操作" align="right">
                <template slot-scope="scope">
                    <el-button
                        icon="el-icon-edit"
                        size="mini"
                        type="primary"
                        @click="updateSwiper(scope.row)"
                        >修改</el-button
                    >
                    <el-button
                        icon="el-icon-delete"
                        size="mini"
                        type="danger"
                        @click="delSwiper(scope.row._id)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <div class="page">
            <el-pagination
                :current-page.sync="currentPage2"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="10"
                layout="prev, pager, next,sizes"
                :total="swiperData.length"
            >
            </el-pagination>
        </div>
        <el-dialog title="添加" :visible.sync="addShow" width="500px">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="商品id">
                    <el-select
                        v-model="form.goods_id"
                        placeholder="请选择商品id"
                    >
                        <el-option
                            :value="item"
                            v-for="(item, index) in goods_id"
                            :key="index"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="图片">
                    <el-input v-model="form.image_src"></el-input>
                </el-form-item>
                <el-form-item label="导航地址">
                    <el-input v-model="form.navigator_url"></el-input>
                </el-form-item>
                <el-form-item label="打开方式">
                    <el-input v-model="form.open_type"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addShow = false">取 消</el-button>
                <el-button type="primary" @click="addBtn">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改" :visible.sync="updateShow" width="500px">
            <el-form ref="form" :model="updateForm" label-width="80px">
                <el-form-item label="商品id">
                    <el-select
                        v-model="updateForm.goods_id"
                        placeholder="请选择商品id"
                    >
                        <el-option
                            :value="item"
                            v-for="(item, index) in goods_id"
                            :key="index"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="图片">
                    <el-input v-model="updateForm.image_src"></el-input>
                </el-form-item>
                <el-form-item label="导航地址">
                    <el-input v-model="updateForm.navigator_url"></el-input>
                </el-form-item>
                <el-form-item label="打开方式">
                    <el-input v-model="updateForm.open_type"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updateShow = false">取 消</el-button>
                <el-button type="primary" @click="updateBtn">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            addShow: false,
            updateShow: false,
            input: "",
            currentPage2: 3,
            swiperData: [],
            form: {},
            updateForm: {},
            goods_id: [
                "601fa488882000007800620e",
                "601fa4f48820000078006743",
                "601fa488882000007800670d",
                "601fa488882000007800670d",
                "601fa488882000007800670f",
                "601fa488882000007800670e",
                "601fa488882000007800670c",
                "601fa488882000007800670d",
            ],
        };
    },
    methods: {
        changeShow() {
            this.show = !this.show;
            this.form = {};
        },
        // 获取轮播图
        async getAllSwiper() {
            const res = await this.$api.slides.getAllSwiper();
            console.log(res);
            if (res.meta.status == 200) {
                this.swiperData = res.message;
            }
        },
        // 添加轮播图
        addSwiper() {
            this.addShow = true;
        },
        async addBtn() {
            const result = await this.$api.slides.addSwiper(this.form);
            if (result.code == 200) {
                this.$message({
                    message: result.message,
                    type: "success",
                });
                this.getAllSwiper();
                this.addShow = false;
                this.form = {};
            } else {
                this.$message({
                    message: result.message,
                    type: "error",
                });
            }
        },
        // 修改轮播图
        updateSwiper(item) {
            this.updateShow = true;
            this.updateForm = { ...item };
        },
        async updateBtn() {
            const result = await this.$api.slides.updateSwiper(this.updateForm);
            console.log(result);
            if (result.code == 200) {
                this.$message({
                    message: result.msg,
                    type: "success",
                });
                this.getAllSwiper();
                this.updateShow = false;
                this.updateForm = {};
            } else {
                this.$message({
                    message: result.error,
                    type: "error",
                });
            }
        },
        // 删除轮播图
        async delSwiper(_id) {
            this.$confirm("删除后无法恢复，你确定要删除这张轮播图？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
                center: true,
            })
                .then(async () => {
                    const result = await this.$api.slides.delSwiper({ _id });
                    if (result.code == 200) {
                        this.$message({
                            message: result.message,
                            type: "success",
                        });
                        this.getAllSwiper();
                        this.show = false;
                    } else {
                        this.$message({
                            message: result.message,
                            type: "error",
                        });
                    }
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
    },
    created() {
        this.getAllSwiper();
    },
};
</script>

<style scoped>
.el-input__inner >>> {
    width: 277px;
    padding: 0;
    margin-bottom: 20px;
}
.table_head {
    background-color: rgb(250, 250, 250);
}
.el-select{
    width: 100%;
}
.page {
    display: flex;
    justify-content: flex-end;
}
</style>